<template>
  <div class="box" ref="chartDom" />
</template>
<script setup>
import { ref, onMounted } from "vue"
import * as echarts from "echarts"
import { getStatisticsDataApi } from "@/api/askForLeaveManage/index"
const chartDom = ref(null) //注意变量名 和 ref名字要对应
const chartName = ref([])
const chartNumber = ref([])
onMounted(() => {
  getStatisticsDataApi().then(({ data }) => {
    for (const key in data) {
      chartName.value.push(key)
      chartNumber.value.push(data[key])
    }
    initChart()
  })
})

const initChart = () => {
  const myChart = echarts.init(chartDom.value)
  const option = {
    tooltip: {
      // 鼠标悬浮提示数据
      trigger: "axis",
      backgroundColor: "rgba(32, 33, 36,.7)",
      borderColor: "rgba(32, 33, 36,0.20)",
      borderWidth: 15,
      textStyle: {
        // 文字提示样式
        color: "#fff",
        fontSize: "12"
      },
      axisPointer: {
        // 坐标轴虚线
        type: "cross",
        label: {
          backgroundColor: "#6a7985"
        }
      }
    },

    // },
    grid: {
      // 控制图表的位置
      left: "5%",
      right: "5%",
      top: "18%",
      bottom: "5%",
      containLabel: true
    },
    xAxis: {
      axisLabel: {
        // X轴线 标签修改
        textStyle: {
          color: "white", //坐标值得具体的颜色
          fontSize: "10"
        }
      },
      data: chartName.value
    },
    yAxis: {
      axisLabel: {
        // y轴线 标签修改
        textStyle: {
          color: "white" //坐标值得具体的颜色
        }
      }
    },
    series: [
      {
        data: chartNumber.value,
        type: "bar",
        barWidth: "48%", //调整柱状图宽度
        itemStyle: {
          normal: {
            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
            borderRadius: [12, 12, 0, 0],
            /*--------设置柱形图渐变色 -------------*/
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0,244,255,1)"
              },
              {
                offset: 1,
                color: "rgba(0,77,167,1)"
              }
            ])
          }
        }
      }
    ]
  }
  option && myChart.setOption(option)
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #031a67;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
